<template>
  <div class="wrap" :style="{transform: 'scale('+widthSize+', '+heightSize+')'}">
    <el-row :gutter="32" class="wrapper">
      <el-col :span="6" class="left">
        <div class="imageWrapper">
          <!--suppress HtmlUnknownTarget -->
          <img class="img1" alt="" :src="image1" draggable="false"/>
          <!--suppress HtmlUnknownTarget -->
          <img v-if="image2" class="img2" alt="" :src="image2" draggable="false"/>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="right">
          <h5 class="title" @click="click">{{title}}</h5>
          <h6 class="price">${{price}}</h6>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'GoodBoxSimple',
  props: {
    id: {
      type: [String, Number],
      request: true
    },
    image1: {
      request: true
    },
    image2: {
      request: false,
      default: null
    },
    title: {
      type: String,
      request: true
    },
    price: {
      type: [String, Number],
      request: true
    },
    widthSize: {
      type: [Number],
      required: false,
      default: 1
    },
    heightSize: {
      type: [Number],
      required: false,
      default: 1
    }
  },
  data () {
    return {

    }
  },
  methods: {
    click () {
      this.$router.push('/shopDetail/' + this.id)
    }
  }
}
</script>

<style lang="scss" scoped>

$time: .4s;

.wrap{

  .wrapper{
    margin: 16px 8px;

    .left, .right{
      text-align: center;
    }

    .left>div, .right>div{
      vertical-align: middle;
    }

    .left{

      .imageWrapper{

        width: 80px;
        height: 80px;
        position: relative;
        vertical-align: middle;
        text-align: center;
        margin: auto;

        img{
          width: 80px;
          height: 80px;
          vertical-align: middle;
          text-align: center;
          margin: auto;
          position: absolute;
          top: 0;
          left: 0;
        }

        .img2{
          opacity: 0;
          transition: $time;
        }

      }

    }

    .right{
      text-align:left;
      padding: 5px 8px;
      line-height: 22px;

      .title{
        font-size: 18px;
        font-weight:700;
        margin-bottom: 4px;
        cursor: pointer;
        color:#31333e;
        transition: $time;
        height: 44px;
        overflow-y: hidden;
      }

      .title:hover{
        color:#ff7353;
        transition: $time;
      }

      .price{
        font-size: 14px;
        color: #777777;
        transition: $time;
        user-select: none;
      }

    }

  }

  .wrapper:hover{

    .left{

      .imageWrapper{

        .img2{
          opacity: 1;
          transition: $time;
        }

      }

    }

    .right{

      .price{
        font-size: 14px;
        color:#ff7353;
        transition: $time;
      }

    }

  }
}

</style>
